<template>
    <example :template-code="templateString">
        <template #describe>
            <t :id="`${$t('纵向菜单')}`">{{ $t('纵向菜单') }}</t>
            <li>
                <span class="d-code">show-collapse</span>控制是否启用水平折叠收起菜单功能
            </li>
            <li>
                <span class="d-code">collapsed</span>控制是否默认处于折叠状态，<span class="s-code">show-collapse</span>为 true 时有效
            </li>
        </template>
        <sib-menu collapsed show-collapse :menus="menus"></sib-menu>
    </example>
</template>

<script>

export default {
    setup() {
        return {
            menus: [
                {
                    name: '菜单标题',
                    icon: 'Location',
                    children: [
                        {
                            name: '菜单1',
                            path: '/menu',
                        },
                        {
                            name: '菜单2',
                            path: '/path1',
                        },
                        {
                            name: '菜单3',
                            path: '/path2',
                        },
                    ],
                },
                {
                    name: '菜单4',
                    path: '/path3',
                    icon: 'Menu',
                },
                {
                    name: '菜单5',
                    path: '/menu2',
                    icon: 'Document',
                },
                {
                    name: '菜单6',
                    path: '/path4',
                    icon: 'Setting',
                },
            ],
            templateString: `<template>
    <div class="example-box">
        <sib-menu collapsed show-collapse :menus="menus"></sib-menu>
    </div>
</template>

<script>
export default {
    setup() {
        return {
            menus: [
                {
                    name: '菜单标题',
                    icon: 'Location',
                    children: [
                        { name: '菜单1', path: '/menu' },
                        { name: '菜单2', path: '/path1' },
                        { name: '菜单3', path: '/path2' },
                    ],
                },
                { name: '菜单4', path: '/path3', icon: 'Menu' },
                { name: '菜单5', path: '/menu2', icon: 'Document' },
                { name: '菜单6', path: '/path4', icon: 'Setting' },
            ],
        };
    },
};
<\/script>`,
        };
    },
};
</script>
